<script setup lang="ts">
import { DownOutlined } from '@ant-design/icons-vue';

import { typeList } from '#/store';

defineProps<{
  indeterminate?: boolean;
  loading?: boolean;
  selectedRowKeys?: any[];
}>();
const $emit = defineEmits(['selectPrd', 'clickBottomButton', 'getList']);
// const payOrder = payOrderStore();
const page: any = defineModel();

function handleMenuClick(key: any) {
  $emit('clickBottomButton', { type: 'pay', key });
}
function handleCurrentChange(val: any, cul: any) {
  page.value.page = val;
  page.value.pageSize = cul;
  $emit('getList');
}
</script>

<template>
  <div
    class="bg-sidebar absolute bottom-0 left-0 flex h-16 w-full justify-between justify-items-end px-4"
    style="z-index: 9"
  >
    <a-space>
      <a-checkbox
        :indeterminate="indeterminate"
        @change="(e: any) => $emit('selectPrd', e.target.checked)"
      >
        已选中{{ selectedRowKeys?.length }}个
      </a-checkbox>
      <a-dropdown>
        <template #overlay>
          <a-menu @click="handleMenuClick">
            <a-menu-item v-for="item in typeList" :key="item.type">
              {{ item.name }}
            </a-menu-item>
          </a-menu>
        </template>
        <a-button :loading="loading" type="primary">
          批量下单/支付
          <DownOutlined />
        </a-button>
      </a-dropdown>
    </a-space>

    <a-space align="center">
      <!-- :loading="loading" -->
      <a-pagination
        v-model:current="page.page"
        v-model:page-size="page.pageSize"
        :loading="loading"
        :page-size-options="['10', '20', '30', '40', '50']"
        :show-total="(total: any) => `共 ${total} 条`"
        :total="page.total"
        show-quick-jumper
        @change="handleCurrentChange"
      />
      <!--    @change="onChangePagin" -->
    </a-space>
  </div>
</template>
